<template>
  <div class="key-person-class">
    <!--按钮组-->
    <div class="Btns-ctrl-body btns-under-box">
     <!-- <div class="search-ctrl f-l " >
        <input type="text" class="search-text" placeholder="搜索类型名称" v-model="searchStr">
        <button type="button" class="search-btn btn btn-info" @click="btnSearch()">搜索</button>
      </div>-->
      <div class="content-wrap Btns-ctrl-body">
        <div class="btns f-r">
          <button type="button"
                  class="btn btn-info btn-info-wpf"
                  v-show="isAddHover"
                  @click="btnAdd">
            新增顶级类型
          </button>
        </div>
      </div>
  </div>
    <!--按钮组闭合-->
    <div class="tree-content">
      <div class="tree-wrap" v-show="!isLocalSj">
        <p v-text="isLocalStationBoole?'上级部门重点人类型结构':'市局部门重点人结构树'"></p>
        <div id="tree-static" class="ztree div-tree"></div>
      </div>
      <div class="tree-wrap" :style="{  flex: isLocalSj ? '0 0 100%' : '0 0 50%' }">
        <p v-text="isLocalStationBoole?'本级部门重点人类型结构':'分局部门重点人结构树'"></p>
        <div id="tree-operation" class="ztree div-tree"></div>
      </div>

    </div>
    <!-- 新增部门 -->
    <addClassModel :addClassObj="addClassObj"
                   @addClassClose="addClassClose" >
    </addClassModel>
    <!-- 新增部门 end -->
    <!-- 修改部门 -->
    <updateClassModel :updateClassObj="updateClassObj"
                   @updateClassClose="updateClassClose" >
    </updateClassModel>
    <!-- 修改部门 end -->
  </div>
</template>

<script>
  import addClassModel from "./addClassModel";
  import updateClassModel from "./updateClassModel";
  export default {
    name: "keyPersonClass",
    components: {
      addClassModel,
      updateClassModel
    },
    data() {
      return {
        setOperation : {
          edit: {
            enable: false
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: "parentid",
            },
            key: {
              name: "typename"
            }
          },
          view: {
            showIcon: false,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
            selectedMulti: false
          },
          callback: {
            onClick: this.zTreeOnClick,
            beforeRemove: this.beforeRemove,
            beforeEditName: this.zTreeBeforeEditName,
            beforeDrag: this.beforeDrag
          }
        },
        setStatic : {
          edit: {
            enable: false
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: "parentid",
            },
            key: {
              name: "typename"
            }
          },
          view: {
            showIcon: false,
            selectedMulti: false
          },
          callback: {
            onClick: this.zTreeOnClick,
          }
        },
        userId: '',
        isAddHover: false,  // 动态树是否增加新增按钮
        staticData: [],   // 静态树数据
        searchStr: '',     // 搜索字段
        // 新增重点人类型数据
        addClassObj: {
          isShow: false,
          parentid: '',
          userId: ''
        },
        updateClassObj: {
          isShow: false,
          parentid: '',
          userId: '',
          typename: '',       // 类型名称 ,
          typekey: '',        // 类型键值,
          type: 0,           // 重点人类型的类型 ,
          isDelete: 0,        //  0 未删除 1 已删除
          id: '',             // id
          hierarchy: 1,
          createStationId: '',
        },
        isLocalStationBoole:false,
        isLocalSj : false,
      }
    },
    computed: {

    },
    mounted() {
      //是否登录
      if( this.isLogin() ){
        this.userId = this.isLogin().userId;
        //console.log('登陆人id: '+this.userId);
        this.isLocalStation();
        this.isLocalStationSJ();
        this.init();
      }else{
        this.$router.push({path:"/login"});
      }
    },
    methods: {
      //判断登录用户是否为市局或分局
      isLocalStation(){
        //GET /BS/ImportPersonType/judgeSJFJ/{userId}
        this.$axios.get(this.ControlObject+"/BS/ImportPersonType/judgeSJFJ/"+this.isLogin().userId)
          .then(res=>{
            //console.log(res);
            this.isLocalStationBoole = res.data;
          })
          .catch(err=>{
            //console.log(err);
          })
      },
      //判断登录用户是否为市局或分局
      isLocalStationSJ(){
        //GET /BS/ImportPersonType/judgeSJFJ/{userId}
        this.$axios.get(this.ControlObject+"/BS/ImportPersonType/judgeSJ/"+this.isLogin().userId)
          .then(res=>{
            //console.log(res);
            this.isLocalSj = res.data;
          })
          .catch(err=>{
            //console.log(err);
          })
      },
      init () {
        this.addClassObj.userId = this.userId;
        this.updateClassObj.userId = this.userId;
        this.canOperate();
        this.treeStatic();[]
      },
      // 能否操作树形结构
      // 市局、分局和分局同级单位可以操作，派出所和警务站不能
      canOperate () {
        this.$axios({
          url: this.ControlObject
            + '/BS/ImportPersonType/judgeSJFJ/'
            + this.userId,
          method: 'get'
        }).then( res => {
          this.isAddHover = res.data
          // 确定悬浮装态是否有新增,选择不同配置文件
          this.treeOperation();
        }).catch( err => {
          this.treeOperation();
          //console.log(err);
        })
      },
      btnSearch() {
        // let data = {
        //   'name': '',
        //   'curPage': current,
        //   'pageSize': pageSize,
        //   'type': 0,
        // };
        // this.$axios.get(this.HOST + '/menu/queryByName?name='
        //   + data.name
        //   + '&curPage='
        //   + data.curPage
        //   + '&pageSize='
        //   + data.pageSize
        //   + '&type='
        //   + data.type).then(res => {
        //   let data = res.data;
        //   this.dataList = data.menuList;
        // })
      },
      // 获取树形结构数据
      treeOperation(){
        this.$axios({
          url: this.ControlObject+'/BS/ImportPersonType/all/operation/'+this.userId,
          method: 'get'
        }).then(res => {
          let setting = {};
          if(this.isAddHover){
            setting = this.setOperation;
          }else {
            setting = this.setStatic;
          }
          $.fn.zTree.init($("#tree-operation"), setting, res.data);
          if(this.isAddHover){
            // 修改编辑状态
            var zTree = $.fn.zTree.getZTreeObj("tree-operation");
            zTree.setEditable(this.isAddHover);
          }
        })
      },
      // 获取静态树
      treeStatic () {
        this.$axios({
          url: this.ControlObject+'/BS/ImportPersonType/all/static/'+this.userId,
          method: 'get'
        }).then(res => {
          this.staticData = res.data;
          $.fn.zTree.init($("#tree-static"), this.setStatic, this.staticData);
        })
      },
      zTreeOnClick (evt, treeId, treeNode) {},
      //  操作树的新增
      addHoverDom(treeId, treeNode) {
        let self = this;
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
          + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
          var zTree = $.fn.zTree.getZTreeObj("treeDemo");
          self.btnAddSubnode(treeNode);
          // zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
          return false;
        });
      },
      // 操作树的更改
      zTreeBeforeEditName (treeId, treeNode) {
        this.btnRevise(treeNode);
        return false;
      },
      //  操作树的删除
      beforeRemove(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree-operation");
        zTree.selectNode(treeNode);
        let nodeAry = zTree.transformToArray(treeNode);
        if(nodeAry.length > 1){
          this.s_alert('该类型下面有子类型，不能直接删除！');
          // alert('删除部门下面有数据，不能删除！');
          return false;
        }
        let msg = confirm("确认删除此类型吗？");
        if (msg) {
          this.btnDelete(treeNode);
        }else {
          return false;
        }
      },
      //  关闭树编辑拖动功能
      beforeDrag (treeId, treeNodes) {
        return false;
      },

      // 新增图标消失 当鼠标移出节点时，隐藏用户自定义控件
      removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
      },
      // 类型新增
      btnAdd () {
        this.addClassObj.parentid = '';
        this.addClassClose();
      },
      btnAddSubnode (treeNode) {
        this.addClassObj.parentid = treeNode.id;
        this.addClassClose();
      },
      // 新增类型弹窗关闭操作
      addClassClose(){
        this.addClassObj.isShow = !this.addClassObj.isShow;
        if(this.addClassObj.isShow === false) {
          // 重新加载表格
          this.clear();
          this.init();
        }
      },
      btnRevise (treeNode) {
        this.updateClassObj.typename = treeNode.typename;
        this.updateClassObj.typekey = treeNode.typekey;
        this.updateClassObj.isDelete = treeNode.isDelete;
        this.updateClassObj.hierarchy = treeNode.hierarchy;
        this.updateClassObj.type = treeNode.type;
        this.updateClassObj.id = treeNode.id;
        this.updateClassObj.createStationId = treeNode.createStationId;
        this.updateClassObj.parentid = treeNode.parentid;
        this.updateClassClose();
  },
      updateClassClose () {
        this.updateClassObj.isShow = !this.updateClassObj.isShow;
        if(this.updateClassObj.isShow === false) {
          // 重新加载表格
          this.clear();
          this.init();
        }
      },
      btnDelete (treeNode) {
        this.$axios({
          url: this.ControlObject
              + '/BS/ImportPersonType/v2/'
              + treeNode.id,
          method: 'delete'
        }).then( res => {
          this.s_alert("删除成功！");
          this.clear();
          this.init();
        }).catch( err => {
          //console.log(err);
        })
      },
      // 清空数据
      clear () {
        this.isAddHover = false;
        this.staticData = [];
        this.searchStr = '';
        this.addClassObj = {
          isShow: false,
          parentid: '',
          userId: ''
        };
        this.updateClassObj = {
          isShow: false,
          parentid: '',
          userId: '',
          typename: '',       // 类型名称 ,
          typekey: '',        // 类型键值,
          type: 0,           // 重点人类型的类型 ,
          isDelete: 0,        //  0 未删除 1 已删除
          id: '',             // id
          hierarchy: 1,
          createStationId: '',
        };
      }
    }, // end methods
    watch:{

    }
  }
</script>

<style scoped lang="scss">
  .key-person-class {
    width: 100%;
    height: 100%;
    .wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding-bottom: 84px;
      tr:nth-child(even){
        background-color: rgba(51, 51, 51, 0.1);
      }
    }
    .zk-talbe {
      margin-top: 10px;
      width: 100%;
      height: 100%;
      overflow: auto;
    }
    .tree-content {
      display: flex;
      text-align: center;
      box-sizing: border-box;
      padding: 10px 10px 35px 10px;
      height: 100%;
      .tree-wrap {
        flex: 0 0 50%;
        text-align: center;
        background-color: transparent;
      /*  padding: 10px 10px 15px 10px;*/
        height: 100%;
        border: 1px #333 solid;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
      }
    }
    #tree-operation, #tree-static {
      margin: 0 auto;
      display: inline-block;
      height: 80%;
      overflow: auto;
    }

  }
  .ztree {
    width: 100%;
    padding-left: 38%;
  }

</style>
<style>

  .ztree li span.button.add {
    margin-left:2px;
    margin-right: -1px;
    background-position:-144px 0;
    vertical-align:top;
    *vertical-align:middle
  }
</style>
